<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]>
<!--><html class="no-js" lang="en"><!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>Magician - Responsive Parallax  Template</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/skeleton.css">
	<link rel="stylesheet" href="css/jquery.fancybox.css">
	<link rel="stylesheet" href="css/layout.css">
    <!--[if lte IE 8]>
        <script src="js/html5.js"></script>
    <![endif]-->		
		
	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="favicon.png">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
</head>
<body>


	<!-- Primary Page Layout
	================================================== -->
	<div id="preloader">
		<div id="status">&nbsp;</div>
	</div>	

	
	<div id="home">	
		<div class="backgr"></div>
		<div class="text-home words">M A G I C I A N</div>
				<div id="rotator" class="fadeIn fadeIn-4s fadeIn-Delay-4s">
						 <div><p>BORN INTO CREATIVITY.</p></div>
						 <div><p>FOCUSED ON STRATEGY.</p></div>
						 <div><p>INSPIRED BY TECHNOLOGY.</p></div>
						 <div><p>CONNECTED TO THE PEOPLE.</p></div>
				</div>
				<div class="center-home fadeIn fadeIn-4s fadeIn-Delay-4s">
					<ul class="list-social-home">
						<li class="icon-soc-home"><a href="#">&#xf099;</a></li>
						<li class="icon-soc-home"><a href="#">&#xf09a;</a></li>
						<li class="icon-soc-home"><a href="#">&#xf09b;</a></li>
						<li class="icon-soc-home"><a href="#">&#xf0d5;</a></li>
						<li class="icon-soc-home"><a href="#">&#xf0d2;</a></li>
					</ul>	
				</div>
		<a href="#" id="arrow_left"><img src="images/arrow_left.png" alt="Slide Left" /></a>
		<a href="#" id="arrow_right"><img src="images/arrow_right.png" alt="Slide Right" /></a>
		
		<div id="maximage">
			<img src="images/slider/1.jpg" alt=""/>
			<img src="images/slider/2.jpg" alt=""/>
			<img src="images/slider/3.jpg" alt=""/>
		</div>	
                <ul class="ca-menu">
                    <li>
                        <a href="#works" class="scroll">
                            <span class="ca-icon">&#xf108;</span>
                            <div class="ca-content">
                                <h2 class="ca-main">WORKS</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#profile" class="scroll">
                            <span class="ca-icon">&#xf007;</span>
                            <div class="ca-content">
                                <h2 class="ca-main">PROFILE</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#gallery" class="scroll">
                            <span class="ca-icon">&#xf030;</span>
                            <div class="ca-content">
                                <h2 class="ca-main">GALLERY</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#news" class="scroll">
                            <span class="ca-icon">&#xf040;</span>
                            <div class="ca-content">
                                <h2 class="ca-main">NEWS</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#contact" class="scroll">
                            <span class="ca-icon">&#xf086;</span>
                            <div class="ca-content">
                                <h2 class="ca-main">CONTACT</h2>
                            </div>
                        </a>
                    </li>
                </ul>		
	</div>
	

	<nav id="navigation">
		<a href="#home" class="scroll" ><img class="logo" alt='logo' src='images/logo.png'></a>
                    <ul   id="menu">
                        <li class="current">
                            <a href="#home" class="scroll">Home</a>
                        </li>
                        <li>
                            <a href="#works" class="scroll">Works</a>
                        </li>
                        <li>
                            <a href="#profile" class="scroll">Profile</a>
                        </li>
                        <li>
                            <a href="#gallery" class="scroll">Gallery</a>
                        </li>
                        <li>
                            <a href="#news" class="scroll">News</a>
                        </li>
                        <li>
                            <a href="#contact" class="scroll">Contact</a>
                        </li>
                    </ul>
	</nav>
	
	<div id="works">
		<div class="container">
			<div class="sixteen columns">
				<h1><span>Work</span></h1>
			</div>	
			<div class="sixteen columns">
				<h5>You will love your work a little bit more. More love on <a href="#">Behance</a> & <a href="#">Dribbble</a>.</h5>
			</div>	
		</div>	
		<div id="wrap">
				<div class="wrapper">

					<div class="topbar">
						<span id="close" class="back">&larr;</span>
					</div>
					
					<ul id="tp-grid" class="tp-grid">

						<!-- project1 -->
						<li data-pile="Brochure">
							<a href="work.html" title="">
								<span class="tp-info"><span>Flu &amp; You</span></span>
								<img src="images/1/1.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Brochure">
							<a href="work.html" title="">
								<span class="tp-info"><span>Test Your Flu IQ</span></span>
								<img src="images/1/2.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Brochure">
							<a href="work.html" title="">
								<span class="tp-info"><span>Unexpected Fatherly Faces</span></span>
								<img src="images/1/3.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Brochure">
							<a href="work.html" title="">
								<span class="tp-info"><span>Fatherly Faces</span></span>
								<img src="images/1/4.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Brochure">
							<a href="work.html" title="">
								<span class="tp-info"><span>Unexpected Faces</span></span>
								<img src="images/1/5.jpg" alt=""  />
							</a>
						</li>

						<!-- project2 -->
						<li data-pile="Mobile Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>On to Easter</span></span>
								<img src="images/2/1.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Mobile Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Love Birds</span></span>
								<img src="images/2/2.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Mobile Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Here Fishy fishy</span></span>
								<img src="images/2/3.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Mobile Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>On to Easter</span></span>
								<img src="images/2/4.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Mobile Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Love Birds</span></span>
								<img src="images/2/5.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Mobile Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Here Fishy fishy</span></span>
								<img src="images/2/6.jpg" alt=""  />
							</a>
						</li>

						<!-- project3 -->
						<li data-pile="Branding">
							<a href="work.html" title="">
								<span class="tp-info"><span>Briefcase</span></span>
								<img src="images/3/1.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Branding">
							<a href="work.html" title="">
								<span class="tp-info"><span>Clipboard</span></span>
								<img src="images/3/2.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Branding">
							<a href="work.html" title="">
								<span class="tp-info"><span>Sweet pack</span></span>
								<img src="images/3/3.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Branding">
							<a href="work.html" title="">
								<span class="tp-info"><span>Briefcase</span></span>
								<img src="images/3/4.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Branding">
							<a href="work.html" title="">
								<span class="tp-info"><span>Clipboard</span></span>
								<img src="images/3/5.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Branding">
							<a href="work.html" title="">
								<span class="tp-info"><span>Sweet pack</span></span>
								<img src="images/3/6.jpg" alt=""  />
							</a>
						</li>

						<!-- project4 -->
						<li data-pile="Interaction Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Growth in 2013</span></span>
								<img src="images/4/1.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Interaction Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Grady Wilson</span></span>
								<img src="images/4/2.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Interaction Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>More Cowbell</span></span>
								<img src="images/4/3.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Interaction Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Growth in 2013</span></span>
								<img src="images/4/4.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Interaction Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Grady Wilson</span></span>
								<img src="images/4/5.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Interaction Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>More Cowbell</span></span>
								<img src="images/4/6.jpg" alt=""  />
							</a>
						</li>

						<!-- project5 -->
						<li data-pile="Illustration">
							<a href="work.html" title="">
								<span class="tp-info"><span>Growth in 2013</span></span>
								<img src="images/5/1.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Illustration">
							<a href="work.html" title="">
								<span class="tp-info"><span>Grady Wilson</span></span>
								<img src="images/5/2.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Illustration">
							<a href="work.html" title="">
								<span class="tp-info"><span>More Cowbell</span></span>
								<img src="images/5/3.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Illustration">
							<a href="work.html" title="">
								<span class="tp-info"><span>Growth in 2013</span></span>
								<img src="images/5/4.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Illustration">
							<a href="work.html" title="">
								<span class="tp-info"><span>Grady Wilson</span></span>
								<img src="images/5/5.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Illustration">
							<a href="work.html" title="">
								<span class="tp-info"><span>More Cowbell</span></span>
								<img src="images/5/6.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Illustration">
							<a href="work.html" title="">
								<span class="tp-info"><span>Growth in 2013</span></span>
								<img src="images/5/7.jpg"  alt="" />
							</a>
						</li>
						<li data-pile="Illustration">
							<a href="work.html" title="">
								<span class="tp-info"><span>Grady Wilson</span></span>
								<img src="images/5/8.jpg"  alt="" />
							</a>
						</li>
						<li data-pile="Illustration">
							<a href="work.html" title="">
								<span class="tp-info"><span>More Cowbell</span></span>
								<img src="images/5/9.jpg"  alt="" />
							</a>
						</li>

						<!-- project6 -->
						<li data-pile="Web Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Growth in 2013</span></span>
								<img src="images/6/1.jpg"  alt="" />
							</a>
						</li>
						<li data-pile="Web Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Grady Wilson</span></span>
								<img src="images/6/2.jpg"  alt="" />
							</a>
						</li>
						<li data-pile="Web Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>More Cowbell</span></span>
								<img src="images/6/3.jpg"  alt="" />
							</a>
						</li>
						<li data-pile="Web Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Growth in 2013</span></span>
								<img src="images/6/4.jpg"  alt="" />
							</a>
						</li>
						<li data-pile="Web Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Grady Wilson</span></span>
								<img src="images/6/5.jpg" alt=""  />
							</a>
						</li>
						<li data-pile="Web Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>More Cowbell</span></span>
								<img src="images/6/6.jpg"  alt="" />
							</a>
						</li>
						<li data-pile="Web Design">
							<a href="work.html" title="">
								<span class="tp-info"><span>Growth in 2013</span></span>
								<img src="images/6/7.jpg"  alt="" />
							</a>
						</li>
					</ul>
				</div>
		</div>			
	</div>	
	
	<div id="separator">
		<div class="container">
			<div class="sixteen columns">
				<h5>We are a group of experienced <span>designers</span> and <span>developers</span>.</h5>
			</div>
		</div>
	</div>	
	
	<div id="profile">	
		<div class="container">
			<div class="sixteen columns">
				<h1><span>About</span></h1>
			</div>
			<div class="sixteen columns">
				<h5>We design and build websites, applications and other awesome digital media.</h5>
			</div>
			<div class="clear"></div>
			<div class="four columns">
				<div id="team1">
					<div class="profile container1">
						<div class="card">
							<div class="face front">
								<img src="images/team1.jpg" alt="" />
							</div>
							<div class="face back1">
								<h6>Jane Doe</h6>
								<p><em>Visual Design</em></p>
							</div>
						</div>
					</div>	
				</div>
				<div class="center">
					<ul class="list-social-team">
						<li class="icon-soc-team"><a href="#">&#xf099;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf09a;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf09b;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf0d5;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf0d2;</a></li>
					</ul>	
				</div>
								<div id="team11">
									<div class="pro-bar">
										<div class="caption">
											<div>Sites Launched</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 83%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Happy Clients</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 98%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Code Lines</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 77%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Making Coffee</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 66%"></span>
										</div>
									</div>
								</div>
			</div>
			<div class="four columns">
				<div id="team2">
					<div class="profile container1">
						<div class="card">
							<div class="face front">
								<img src="images/team2.jpg" alt="" />
							</div>
							<div class="face back1">
								<h6>John Doe</h6>
								<p><em>Quality Control</em></p>
							</div>
						</div>
					</div>	
				</div>
				<div class="center">
					<ul class="list-social-team">
						<li class="icon-soc-team"><a href="#">&#xf099;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf09a;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf09b;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf0d5;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf0d2;</a></li>
					</ul>	
				</div>
								<div id="team22">
									<div class="pro-bar">
										<div class="caption">
											<div>Sites Launched</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 83%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Happy Clients</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 98%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Code Lines</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 77%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Making Coffee</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 66%"></span>
										</div>
									</div>
								</div>
			</div>
			<div class="four columns">
				<div id="team3">
					<div class="profile container1">
						<div class="card">
							<div class="face front">
								<img src="images/team3.jpg" alt="" />
							</div>
							<div class="face back1">
								<h6>Jane Doe</h6>
								<p><em>Management</em></p>
							</div>
						</div>
					</div>	
				</div>
				<div class="center">
					<ul class="list-social-team">
						<li class="icon-soc-team"><a href="#">&#xf099;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf09a;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf09b;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf0d5;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf0d2;</a></li>
					</ul>	
				</div>
								<div id="team33">
									<div class="pro-bar">
										<div class="caption">
											<div>Sites Launched</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 83%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Happy Clients</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 98%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Code Lines</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 77%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Making Coffee</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 66%"></span>
										</div>
									</div>
								</div>
			</div>
			<div class="four columns">
				<div id="team4">
					<div class="profile container1">
						<div class="card">
							<div class="face front">
								<img src="images/team4.jpg" alt="" />
							</div>
							<div class="face back1">
								<h6>John Doe</h6>
								<p><em>Web Development</em></p>
							</div>
						</div>
					</div>	
				</div>
				<div class="center">
					<ul class="list-social-team">
						<li class="icon-soc-team"><a href="#">&#xf099;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf09a;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf09b;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf0d5;</a></li>
						<li class="icon-soc-team"><a href="#">&#xf0d2;</a></li>
					</ul>	
				</div>
								<div id="team44">
									<div class="pro-bar">
										<div class="caption">
											<div>Sites Launched</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 83%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Happy Clients</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 98%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Code Lines</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 77%"></span>
										</div>
									</div>
									<div class="pro-bar">
										<div class="caption">
											<div>Making Coffee</div>	
										</div>
										<div class="progress-bar orange stripes">
											<span style="width: 66%"></span>
										</div>
									</div>
								</div>
			</div>
		<div class="clear"></div>	
		</div>	
		<div id="twit">
			<div class="twitter" id="jstweets"></div>
		</div>
		<div id="services">
		<div class="container padding-top">
			<div class="services1 one-third column">
				<img src="images/icon1.png" alt="" />
				<h6>We are innovative.</h6>	
				<p>HTML5 Power</p>
				<p>CSS3 Beautiful</p>	
				<p>JS Effects</p>
				<div class="button-ser">
					<a class="inner-button-services" href="#">View Details</a>
				</div>
			</div>
			<div class="services1 one-third column">
				<img src="images/icon2.png" alt="" />
				<h6>We are awesome.</h6>	
				<p>PHP</p>
				<p>AJAX</p>	
				<p>SQL</p>
				<div class="button-ser">
					<a class="inner-button-services" href="#">View Details</a>
				</div>
			</div>
			<div class="services1 one-third column">
				<img src="images/icon3.png" alt="" />
				<h6>We are creative.</h6>	
				<p>Android Dev</p>
				<p>iOS Development</p>	
				<p>Windows Phone</p>
				<div class="button-ser">
					<a class="inner-button-services" href="#">View Details</a>
				</div>
			</div>
		</div>	
		</div>
	</div>

	
	<div id="separator2">
		<div class="container">
			<div class="sixteen columns">
				<h5>We bring a personal and effective <span>approach</span> to every <span>project</span> we work on.</h5>
			</div>
		</div>
	</div>		
	
	
	
	<div id="gallery">	
		<div class="container">
			<div class="sixteen columns">
				<h1><span>Gallery</span></h1>
			</div>
			<div class="sixteen columns">
				<h5>We bring a personal and effective approach to every project we work on.</h5>
			</div>	
		</div>	
	<div class="fil">	
		<div class="container">
			<div class="sixteen columns">
				<div id="portfolio-filter">
					<ul id="filter">
						<li><a href="#" class="current" data-filter="*" title="Show all items">Show all</a></li>
						<li><a href="#" data-filter=".photography" title="Show all items under Photography">photography</a></li>
						<li><a href="#" data-filter=".illustration" title="Show all items under Illustration">illustration</a></li>
						<li><a href="#" data-filter=".motion-graphics" title="Show all items under Motion Graphics">motion graphics</a></li>
						<li><a href="#" data-filter=".web-design" title="Show all items under Web Design">web design</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>	
		<div class="container">
	<div class="portfolio">
			<div class="one-third column photography">
				<div class="project1">
					<a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">
						<div class="pro-image1">
							<img src="images/gallery/1.jpg" alt="" />			
							<div class="mask-w1"></div>
						</div>
					</a>
				</div>
			</div>
			<div class="one-third column illustration">
				<div class="project1">
					<a class="fancybox" data-fancybox-group="gallery" href="images/gallery/2t.jpg" title="Project Title">
						<div class="pro-image1">
							<img src="images/gallery/2.jpg" alt="" />			
							<div class="mask-w1"></div>
						</div>
					</a>
				</div>
			</div>	
			<div class="one-third column photography">
				<div class="project1">
					<a class="fancybox" data-fancybox-group="gallery" href="images/gallery/3t.jpg" title="Project Title">
						<div class="pro-image1">
							<img src="images/gallery/3.jpg" alt="" />			
							<div class="mask-w1"></div>
						</div>
					</a>
				</div>
			</div>
			<div class="one-third column web-design">
				<div class="project1">
					<a class="fancybox-media" href="http://www.metacafe.com/watch/7635964/">
						<div class="pro-image1">
							<img src="images/gallery/4.jpg" alt="" />			
							<div class="mask-w1"></div>
						</div>
					</a>
				</div>
			</div>
			<div class="one-third column motion-graphics">
				<div class="project1">
					<a class="fancybox" data-fancybox-group="gallery" href="images/gallery/5t.jpg" title="Project Title">
						<div class="pro-image1">
							<img src="images/gallery/5.jpg" alt="" />			
							<div class="mask-w1"></div>
						</div>
					</a>
				</div>
			</div>
			<div class="one-third column web-design">
				<div class="project1">
					<a class="fancybox-media" href="http://www.dailymotion.com/video/xoeylt_electric-guest-this-head-i-hold_music">
						<div class="pro-image1">
							<img src="images/gallery/6.jpg" alt="" />			
							<div class="mask-w1"></div>
						</div>
					</a>
				</div>
			</div>
			<div class="one-third column motion-graphics">
				<div class="project1">
					<a class="fancybox" data-fancybox-group="gallery" href="images/gallery/7t.jpg" title="Project Title">
						<div class="pro-image1">
							<img src="images/gallery/7.jpg" alt="" />			
							<div class="mask-w1"></div>
						</div>
					</a>
				</div>
			</div>
			<div class="one-third column illustration">
				<div class="project1">
					<a class="fancybox" data-fancybox-group="gallery" href="images/gallery/8t.jpg" title="Project Title">
						<div class="pro-image1">
							<img src="images/gallery/8.jpg" alt="" />			
							<div class="mask-w1"></div>
						</div>
					</a>
				</div>
			</div>
			<div class="one-third column motion-graphics">
				<div class="project1">
					<a class="fancybox" data-fancybox-group="gallery" href="images/gallery/9t.jpg" title="Project Title">
						<div class="pro-image1">
							<img src="images/gallery/9.jpg" alt="" />			
							<div class="mask-w1"></div>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>	
	</div>


	<div id="separator3">
		<div class="container">
			<div class="sixteen columns">
				<h5>Description about recent <span>news</span>.</h5>
			</div>
		</div>
	</div>	

	

	<div id="news">	
		<div class="container">
			<div class="sixteen columns">
				<h1><span>News</span></h1>
			</div>
			<div class="sixteen columns">
				<h5>Description about recent news.</h5>
			</div>
		</div>
			<div class="main">
				<ul class="cbp_tmtimeline">
					<li>
						<time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span> <span>18:30</span></time>
						<div class="cbp_tmicon cbp_tmicon-phone"></div>
						<div class="cbp_tmlabel">
							<img src="images/news/1.jpg" alt="" />
							<h2>Ricebean black-eyed pea</h2>
							<p>Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape radish bush tomato ricebean black-eyed pea maize eggplant. Cabbage lentil cucumber chickpea sorrel gram garbanzo plantain lotus root bok choy.</p>
							<a class="inner-button-news" href="news.html">View More</a>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime" datetime="2013-04-11T12:04"><span>4/11/13</span> <span>12:04</span></time>
						<div class="cbp_tmicon cbp_tmicon-screen"></div>
						<div class="cbp_tmlabel">
							<img src="images/news/2.jpg" alt="" />
							<h2>Greens radish arugula</h2>
							<p>Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach kombu courgette lettuce. Celery coriander bitterleaf epazote radicchio shallot winter purslane collard greens spring onion squash lentil. Artichoke salad bamboo shoot black-eyed pea brussels sprout garlic kohlrabi.</p>
							<a class="inner-button-news1" href="news.html">View More</a>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime" datetime="2013-04-13 05:36"><span>4/13/13</span> <span>05:36</span></time>
						<div class="cbp_tmicon cbp_tmicon-mail"></div>
						<div class="cbp_tmlabel">
							<img src="images/news/3.jpg" alt="" />
							<h2>Sprout garlic kohlrabi</h2>
							<p>Parsnip lotus root celery yarrow seakale tomato collard greens tigernut epazote ricebean melon tomatillo soybean chicory broccoli beet greens peanut salad. Lotus root burdock bell pepper chickweed shallot groundnut pea sprouts welsh onion wattle seed pea salsify turnip scallion peanut arugula bamboo shoot onion swiss chard.</p>
							<a class="inner-button-news" href="news.html">View More</a>
						</div>
					</li>
					<li>
						<time class="cbp_tmtime" datetime="2013-04-15 13:15"><span>4/15/13</span> <span>13:15</span></time>
						<div class="cbp_tmicon cbp_tmicon-phone"></div>
						<div class="cbp_tmlabel">
							<img src="images/news/4.jpg" alt="" />
							<h2>Watercress ricebean</h2>
							<p>Peanut gourd nori welsh onion rock melon mustard jicama. Desert raisin amaranth kombu aubergine kale seakale brussels sprout pea. Black-eyed pea celtuce bamboo shoot salad kohlrabi leek squash prairie turnip catsear rock melon chard taro broccoli turnip greens. Fennel quandong potato watercress ricebean swiss chard garbanzo.</p>
							<a class="inner-button-news1" href="news.html">View More</a>
						</div>
					</li>
				</ul>	
			</div>	
	</div>

	
	
	<div id="separator1">
		<div class="container">
			<div class="sixteen columns">
				<h5>Ready to get started? <span>Great</span>, so are we.</h5>
			</div>
		</div>
	</div>

	
	<div id="contact">
		<div id="map"></div>
		<div class="container">
			<div class="eight columns">
				<form name="ajax-form" id="ajax-form" action="http://ivang-design.com/magician/mail-it.php" method="post">
					<label for="name">Name: * 
						<span class="error" id="err-name">please enter name</span>
					</label>
					<input name="name" id="name" type="text" />
					<label for="email">E-Mail: * 
						<span class="error" id="err-email">please enter e-mail</span>
						<span class="error" id="err-emailvld">e-mail is not a valid format</span>
					</label>
					<input name="email" id="email" type="text" />
					<label for="message">Message:</label>
					<textarea name="message" id="message"></textarea>
					<button class="send_message" id="send">Submit</button>
					<div class="error" id="err-form">There was a problem validating the form please check!</div>
					<div class="error" id="err-timedout">The connection to the server timed out!</div>
					<div class="error" id="err-state"></div>
				</form>
				<div id="ajaxsuccess">Successfully sent!!</div>	
			</div>
			<div class="eight columns">
				<div class="text-and-icon"><div class="icon-c">&#xf003;</div><h4><a href="mailto:email@server.com"><span>office@server.com</span></a></h4></div>
				<div class="text-and-icon"><div class="icon-c">&#xf10b;</div><h4>123 456 789</h4></div>
				<div class="text-and-icon"><div class="icon-c">&#xf015;</div><h4>Trstenik, Serbia</h4></div>
			</div>	
		</div>	
	</div>		

	<div id="copyright">
		<div class="container">
			<div class="sixteen columns">
				<div class="center">
					<ul class="list-social-contact">
						<li class="icon-soc-contact"><img src="images/soc/1.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/2.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/3.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/4.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/5.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/6.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/7.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/8.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/9.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/10.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/11.png" alt="" /></li>
						<li class="icon-soc-contact"><img src="images/soc/12.png" alt="" /></li>
					</ul>	
				</div>
			</div>
			<div class="sixteen columns">
				<div class="border-footer"></div>
			</div>
			<div class="sixteen columns">
				<p>&copy; copyright 2013 MAGIC<span>I</span>AN</p>
			</div>	
		</div>	
	</div>	
	
	<!-- JAVASCRIPT
  ================================================== -->
  
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 		
<script type="text/javascript" src="js/gmaps.js"></script>
<script type="text/javascript" src="js/jquery.lettering.js"></script>
<script type="text/javascript" src="js/jquery.sticky.js"></script>	
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/easing-min.js"></script>
<script type="text/javascript" src="js/template.js"></script>	
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="js/contact.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-media3447.js?v=1.0.5"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/jquery.stapel.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/jquery.maximage.js"></script>
<!-- End Document
================================================== -->
</body>
</html>